<template>
  <n-dropdown :options="options" @select="handleSelect" trigger="hover">
    <div class="flex-between" style="cursor: pointer; margin-left: 10px">
      <n-avatar
        class="user-avatar-trigger"
        style="cursor: pointer"
        :style="{
          color: 'yellow',
          backgroundColor: 'red',
        }"
        :round="true"
      >
        U
      </n-avatar>
      <span class="user-name">root</span>
    </div>
  </n-dropdown>
</template>

<script lang="ts" setup>
import type { DropdownOption } from "naive-ui";
import { useAuthStore } from "@/store/modules/auth";
import { storage } from "@/utils/storage";

const options: DropdownOption[] = [
  {
    label: "用户中心",
    key: "user-center",
  },
  {
    type: "divider",
    key: "divider",
  },
  {
    label: "退出登录",
    key: "logout",
  },
];

const auth = useAuthStore();
const route = useRoute();
const router = useRouter();

// 退出登录
const handleSelect = (optionKey: string) => {
  if (optionKey === "logout") {
    window.$dialog?.info({
      title: "提示",
      content: "您确定要退出登录吗",
      positiveText: "确定",
      negativeText: "取消",
      onPositiveClick: () => {
        auth.logout().then(() => {
          window.$message?.success("成功退出登录");
          storage.clear();
          router.push({
            name: "SignIn",
            query: {
              redirect: route.fullPath,
            },
            replace: true,
          });
        });
      },
      onNegativeClick: () => {
        console.log("test");
      },
    });
  }
};
</script>

<style lang="less" scoped>
.avatar {
  display: flex;
  align-items: center;
  height: 64px;
}

.user-name {
  font-weight: 500;
  font-size: 20px;
  padding-left: 8px;
  cursor: pointer;
  line-height: inherit;
}

.user-avatar-trigger {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
</style>
